import webpack, { Configuration } from "webpack";
import HtmlWebpackPlugin = require("html-webpack-plugin");
import { destDir } from "./config";

const names = ["background", "popup", "devtools", "panel", "main", "mid", "j"];

const PUBLIC_URL =
  process.env.NODE_ENV === "development"
    ? "http://localhost:8080/"
    : `https://cphub.clickpaas.tech/doc/clickpaas-chrome-extension/`;

export default {
  entry: names.reduce(
    (acc, name) => ({
      ...acc,
      [name]: `./src/${name}.tsx`,
    }),
    {}
  ),
  output: {
    path: `${__dirname}/${destDir}`,
  },
  plugins: [
    new webpack.DefinePlugin({
      PUBLIC_URL: JSON.stringify(PUBLIC_URL),
    }),
    ...names.map(
      (name) =>
        new HtmlWebpackPlugin({
          filename: `${name}.html`,
          title: name,
          chunks: [name],
          favicon: "./favicon.png",
        })
    ),
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(ttf|txt|jpe?g|png|ico|webp|gif)$/i,
        use: ["file-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
} as Configuration;
